<template>
  <div class="app">
    <router-link to="index/myCommodity">
    <div class="top">X</div>
    </router-link>
    <div class="logo"><img src="../image/nanhai.png"/></div>
    <input v-model="msg" maxlength="11" type="text" placeholder="手机号"/>
    <input v-model="password" type="password" maxlength="12" placeholder="密码"/>
    <span>找回密码</span>
    <div class="wtf">
      <button>登录</button>
      <button @click="go_red">注册</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data() {
    return {
      msg: '',
      password: '',
    };
  },
  methods: {
    go_red() {
      this.$router.push('/registered');
    },
  },
  // updated() {
  //   const telReg = /^1[35789]\d{9}$/;
  //   if (telReg.test(this.msg)) {
  //     this.$Message.success('手机号输入正确,请输入密码');
  //   }
  // },
};
</script>

<style lang="scss" scoped>
  .app{
    position: relative;
    width: 100vw;
    box-sizing: border-box;
    padding: 100px 100px;
    input{
      width: 100%;
      border: none;
      border-bottom: 1px solid #ddd;
      margin-top: 100px;
    }
    .wtf{
      button:first-child{
        background: linear-gradient(to right, red ,orange );
        color: white;
      }
      button{
        background-color: #fff;
        border: 1px solid #ddd;
        width: 70vw;
        line-height: 100px;
        display: block;
        margin: 150px auto;
        color: #bbb;
        letter-spacing: 3px;
        outline: none;
        font-size: 50px;
      }
    }
    span{
      position: absolute;
      right: 100px;
      top: 960px;
      color: #bbb;
    }
    .top{
      line-height: 100px;
    }
    .logo{
      text-align: center;
      width: 50vw;
      margin: 100px auto;
      img{
        width: 200px;
      }
    }
  }
</style>
